<template>
    <van-sticky position="top">
        <topSearch v-if="$route.meta.isShowTopSearch" />
        <topNavBar v-if="$route.meta.isShowTopBar" :topBarTitle='$route.meta.topBarTitle' :isShowRight="$route.meta.isShowRight" />
    </van-sticky>

    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
        <router-view />
    </van-pull-refresh>

    <bottomBar v-if="$route.meta.isShowBottomBar" />
</template>

<script>
    import bottomBar from './components/bottomBar.vue'
    import topSearch from '../src/components/search.vue'
    import topNavBar from '../src/components/topNavBar.vue'
    import { defineComponent, provide } from "vue";
    import { ref, reactive, toRefs } from 'vue'
    import { showToast } from 'vant'
    export default defineComponent({
        components: { bottomBar, topSearch, topNavBar },
        setup() {
            const data = reactive({})
            const isLoading = ref(false);
            const onRefresh = () => {
                setTimeout(() => {
                    showToast('刷新成功');
                    isLoading.value = false;
                }, 1000);
            };

            function debounce(fn, delay) {
                let timer = null
                // 原始函数的参数args
                const _debounce = function(...args) {
                    if (timer) clearTimeout(timer)
                    timer = setTimeout(() => {
                        // 绑定this
                        fn.apply(this, args)
                    }, delay)
                }
                return _debounce
            }
            const _ = window.ResizeObserver;
            window.ResizeObserver = class ResizeObserver extends _ {
                constructor(callback) {
                    callback = debounce(callback, 20);
                    super(callback);
                }
            };
            return {
                ...toRefs(data),
                isLoading,
                onRefresh,
            }
        },
    })
</script>
<style>
    body,
    html {
        margin: 0;
        padding: 0;
    }

    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
    }

    nav {
        padding: 30px;
    }

    nav a {
        font-weight: bold;
        color: #2c3e50;
    }

    nav a.router-link-exact-active {
        color: #42b983;
    }
</style>